<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- 表格工具栏 -->
            <div class="ele-table-tool">
                <div class="ele-table-tool-left">
                    <el-button @click="showEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加</el-button>
                    <el-button @click="mulRemove" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small">删除</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
                <template slot-scope="{index}">
                    <el-table-column type="selection" width="45" align="center" fixed="left"/>
                    <el-table-column type="index" label="序号" :index="index" width="60" align="center" fixed="left" show-overflow-tooltip/>
                    <el-table-column prop="name" label="假期姓名" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="unitName" label="请假单位" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="calName" label="时长核算" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="limit" label="限制天数" show-overflow-tooltip min-width="110"/>
                    
                    <el-table-column label="操作" align="center" width="200px" :resizable="false" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="warning" size="mini" class="smbtn">修改</el-button>
                            <el-button @click="oneRemove(scope.row)" type="danger" size="mini" class="smbtn">删除</el-button>
                        </template>
                    </el-table-column>
               
                </template>
            </ele-data-table>
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog :title="editForm.id ? '修改假期' : '添加假期'" :visible.sync="showEdit" width="800px"
                :destroy-on-close="true" :lock-scroll="false" :close-on-click-modal="false">

           <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="96px">
          
                <el-form-item label="假期名称:" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入假期名称" clearable/>
                </el-form-item>
    
                <el-form-item label="请假单位:" prop="unit">
                    <el-select v-model="editForm.unit" placeholder="请选择" clearable class="ele-fluid">
                        <el-option
                            v-for="item in extra.unit"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="时长核算:" required>
                    <el-radio-group v-model="editForm.caleave">
                        <el-radio :label="1">工作日</el-radio>
                        <el-radio :label="2">自然日</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="限制天数:" required>
                    <el-radio-group v-model="editForm.limit">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <div v-show="editForm.limit==1">
                <el-form-item label="限制规则:" prop="limit_rules">
                    <el-select v-model="editForm.limit_rules" placeholder="请选择" clearable class="ele-fluid">
                        <el-option
                            v-for="item in limit_rules"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="假期天数:" prop="limitDays" v-show="editForm.limit_rules==1">
                    <el-input v-model="editForm.limitDays" placeholder="请输入假期天数" clearable/>
                </el-form-item>

                <div class="formScope" v-show="editForm.limit_rules==2">
                    <el-row :gutter="15">
                        <el-col :md="20" :sm="20" :offset="3">
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="start" label="开始时间" width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.start" placeholder="请输入假期天数">
                                            <template slot="append">年</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="end" label="结束时间" width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.end">
                                            <template slot="append">年</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="days" label="假期天数">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.days">
                                            <template slot="append">天</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </div>

                <div class="formScope" v-show="editForm.limit_rules==3">
                    <el-form-item label="初始天数:" prop="cc1">
                        <el-input v-model="editForm.cc1" placeholder="请输入初始天数" clearable/>
                    </el-form-item>
                    <el-form-item label="增长年数:" prop="cc2">
                        <el-input v-model="editForm.cc2" placeholder="请输入增长年数" clearable/>
                    </el-form-item>
                    <el-form-item label="增长天数:" prop="cc3">
                        <el-input v-model="editForm.cc3" placeholder="请输入增长天数" clearable/>
                    </el-form-item>
                    <el-form-item label="最高天数:" prop="cc4">
                        <el-input v-model="editForm.cc4" placeholder="请输入最高天数" clearable/>
                    </el-form-item>
                </div>

                <el-form-item label="发放时间:" prop="senday">
                    <el-select v-model="editForm.senday" placeholder="请选择" clearable class="ele-fluid">
                        <el-option :key="1" :label="'每年一月一日'" :value="1"></el-option>
                        <el-option :key="2" :label="'每年员工入职日期'" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                </div>
            </el-form>

            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {

        let time = this.$util.oneDayRange();
        const editFormDefault = {
            caleave: 1,
            limit: 1
        };

        let validateCC = (rule, value, callback) => {
            if (this.editForm.limit_rules == 3 && this.editForm.limit == 1 && !value) {
                callback(new Error(rule.message));
            }
        };

        let validateLimitDays = (rule, value, callback) => {
            if (this.editForm.limit_rules == 1 && this.editForm.limit == 1 && !value) {
                callback(new Error(rule.message));
            }
        };

        let validateLimitRules = (rule, value, callback) => {
            if (this.editForm.limit == 1 && !value) {
                callback(new Error(rule.message));
            }
        };
        
        return {
            table: { // 表格配置
                url: '/api/attend/teacher/leave',
                where: {
                    time: time 
                },
                page: true
            },
            choose: [],  // 表格选中数据
            unit: [ // 请假单位
                { id: 1, name: "小时" },
                { id: 2, name: "半天" },
                { id: 3, name: "天" },
            ],
            limit_rules: [ // 限制规则
                { id: 1, name: "固定额度"},
                { id: 2, name: "按工作年限"},
                { id: 3, name: "递增式规则"}
            ],
            editForm: editFormDefault,
            showEdit: false,
            editRules: {
                name: [
                    {required: true, message: '请输入假期名称', trigger: 'blur'}
                ],
                unit: [
                     {required: true, message: '请选择请假单位', trigger: 'change'}
                ],
                limitDays: [
                    {required: true, validator: validateLimitDays, trigger: 'blur', message: '请输入假期天数'}
                ],

                limit_rules: [
                     {required: true, validator: validateLimitRules, trigger: 'change', message: '请选择限制规则'}
                ],

                cc1: [
                    {required: true, validator: validateCC, trigger: 'blur', message: '请输入初始天数'}
                ],
                cc2: [
                    {required: true, validator: validateCC, trigger: 'blur', message: '请输入增长年数'}
                ],
                cc3: [
                    {required: true, validator: validateCC, trigger: 'blur', message: '请输入增长天数'}
                ],
                cc4: [
                    {required: true, validator: validateCC, trigger: 'blur', message: '请输入最高天数'}
                ],
            },
            tableData: [ // 按工作年限限制 默认值
                {start: 1, end: 10, days: 5},
                {start: 11, end: 20, days: 10},
                {start: 21, end: 50, days: 15},
            ]
        }
    },

    methods: {

        /* 清空选择 */
        clearChoose() {
            this.$refs.table.clearSelection();
        },

        /* 保存编辑 */
        save() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({lock: true});
                    const url = this.editForm.id > 0 ? '/api/attend/student/leave/edit' : '/api/attend/student/leave/add';
                    this.$http.post(url, this.editForm).then(res => {
                        loading.close();
                        if (res.data.code === 0) {
                            this.showEdit = false;
                            this.$message({type: 'success', message: res.data.msg});
                            this.$refs.table.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(e => {
                        loading.close();
                        this.$message.error(e.message);
                    });
                } else {
                    return false;
                }
            });
        },

        /* 编辑 */
        edit(row) {
            this.editForm = Object.assign({}, row);
            this.showEdit = true;
        },

        filter() {

        },

        delete(ids) {
            this.$confirm('确定要删除吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.post('/api/attend/student/leave/delete', {ids: ids}).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        mulRemove() {
            if (this.choose.length == 0) {
                this.$message.warning('请至少选择一条规则');
                return false;
            } 
            let ids = [];
            for(var i = 0; i< this.choose.length; i++) {
                ids.push(this.choose[i].id);
            }
            this.delete(ids);
        },

        oneRemove(row) {
            let ids = [];
            ids.push(row.id);
            this.delete(ids);
        }
    }
}
</script>

<style scoped>
.formScope {
    margin-bottom: 15px;
}
</style>